<template>
  <div class="pile-manage">
    <el-card>
      <h2>充电桩管理</h2>
      <el-button type="primary" @click="onAdd">新增充电桩</el-button>
      <el-table :data="piles" style="margin-top:20px">
        <el-table-column prop="pileID" label="桩编号" />
        <el-table-column prop="stationID" label="所属站点">
          <template slot-scope="scope">
            <span>{{ getStationName(scope.row.stationID) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="piletype" label="类型">
          <template slot-scope="scope">
            <span v-if="scope.row.piletype===1">快充</span>
            <span v-else-if="scope.row.piletype===2">慢充</span>
            <span v-else>未知</span>
          </template>
        </el-table-column>
        <el-table-column prop="pilestatus" label="状态">
          <template slot-scope="scope">
            <span v-if="scope.row.pilestatus===1">空闲</span>
            <span v-else-if="scope.row.pilestatus===2">使用中</span>
            <span v-else-if="scope.row.pilestatus===3">故障</span>
            <span v-else>未知</span>
          </template>
        </el-table-column>
        <el-table-column prop="ismobile" label="是否可移动">
          <template slot-scope="scope">
            <span v-if="scope.row.ismobile">是</span>
            <span v-else>否</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="onEdit(scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="onDelete(scope.row.pileID)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog :visible.sync="dialogVisible" :title="dialogTitle">
      <el-form :model="form" label-width="80px">
        <el-form-item label="所属站点">
          <el-select v-model="form.stationID" placeholder="请选择站点">
            <el-option v-for="s in stations" :key="s.stationID" :label="s.stationLoc" :value="s.stationID" />
          </el-select>
        </el-form-item>
        <el-form-item label="类型">
          <el-select v-model="form.piletype">
            <el-option label="快充" :value="1" />
            <el-option label="慢充" :value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="form.pilestatus">
            <el-option label="空闲" :value="1" />
            <el-option label="使用中" :value="2" />
            <el-option label="故障" :value="3" />
          </el-select>
        </el-form-item>
        <el-form-item label="是否可移动">
          <el-switch v-model="form.ismobile" active-text="是" inactive-text="否" />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogVisible=false">取消</el-button>
        <el-button type="primary" @click="onSave">保存</el-button>
      </div>
    </el-dialog>
    <el-alert v-if="msg" :title="msg" type="success" show-icon style="margin-top:10px;" />
  </div>
</template>
<script>
import api from '@/api';
export default {
  data() {
    return {
      piles: [],
      stations: [],
      dialogVisible: false,
      dialogTitle: '新增充电桩',
      form: { pileID: '', stationID: '', piletype: 1, pilestatus: 1, ismobile: false },
      editMode: false,
      msg: '',
      loading: false
    };
  },
  async created() {
    await this.fetchStations();
    await this.fetchPiles();
  },
  methods: {
    async fetchStations() {
      try {
        this.stations = await api.get('/station/list');
      } catch (e) {
        this.msg = '获取站点失败';
      }
    },
    getStationName(id) {
      const s = this.stations.find(x => x.stationID === id);
      return s ? s.stationLoc : '未知';
    },
    async fetchPiles() {
      this.loading = true;
      try {
        this.piles = await api.get('/pile/list');
      } catch (e) {
        this.msg = '获取充电桩失败';
      }
      this.loading = false;
    },
    onAdd() {
      this.dialogTitle = '新增充电桩';
      this.form = { pileID: '', stationID: '', piletype: 1, pilestatus: 1, ismobile: false };
      this.editMode = false;
      this.dialogVisible = true;
    },
    onEdit(pile) {
      this.dialogTitle = '编辑充电桩';
      this.form = { ...pile };
      this.editMode = true;
      this.dialogVisible = true;
    },
    async onSave() {
      this.loading = true;
      try {
        if (this.editMode) {
          await api.post('/pile/update', this.form);
        } else {
          await api.post('/pile/add', this.form);
        }
        this.dialogVisible = false;
        await this.fetchPiles();
        this.msg = '操作成功';
      } catch (e) {
        this.msg = '操作失败';
      }
      this.loading = false;
    },
    async onDelete(id) {
      this.loading = true;
      try {
        await api.post('/pile/delete', { pileID: id });
        await this.fetchPiles();
        this.msg = '删除成功';
      } catch (e) {
        this.msg = '删除失败';
      }
      this.loading = false;
    }
  }
};
</script>
<style scoped>
.pile-manage { max-width: 1000px; margin: 40px auto; }
</style>
